<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>哈基文本格式化属性  一共10个</title>
		<!-- 文本格式化的属性(4种方式,10个属性)
		1.控制字体:font-family、font-size、font-weight
		2.控制文本布局【对齐、间隙】:text-algin(左右对齐) 、line-height(上下对齐)、letter-spacing、word-spacing
		3.文本修饰效果：text-decoration只针对超链接 、text-shadow阴影
		4.处理文本效果：white-space换行
		 -->
		 
		<style>
			/* CSS3语法：选择器{
				属性：属性值;
				属性：属性值;去掉;全部寄几
				}
				叫法：一个样式
				id选择器语法:html元素加id=别名
				css中加#别名选中
		    提醒：加权/  div+里头的命名  元素选择器div 权值1
			     id选择器  权值100
				*/
			   div#sz{
				   color: blue; 
                  /* 知识点1：文本格式化属性 
				  1.针对控制字体
				  font-family字体家族：微软雅黑
				  问题：可以设置多个字体，浏览器会按照顺序找字体
				  兼容考虑:用户电脑字体缺失，对应可以使用字体
				  */
				 font-family: 华文彩云;
				 /* 文本格式化属性-->针对控制字体 知识点2
				  font-size字体尺寸:px/em
				  px---PC端---像素 特点：绝对值
				  em---移动端---特点:相对于父元素字体大小,倍数形式放大
				  
				  */
				 font-size: 2em;
			     /* 文本格式化属性 --针对控制字体  知识点3
				 font-weight字体粗细程度   100/200/300...900 
				 用法：全局字体，通配选择器中使用，400和700
				 400为正常大小   normal(正常)
				                bold  相对于父元素加粗
								light  相对于父元素变系
				 */
				 font-weight: 400;//粗细
				 
			   }
			  div h1.c2{
				  /* 知识点4.文本格式化属性-针对控制文本格式 */
				   color:red;
				   text-align: justify;
				   /* 两端对齐:字体空间长度,使用位置:弹性布局 */
				   font-family:华文彩云;
			   }
				.marquee{
					color:red;
				}	
			marquee{
				color:red;
				font-family: 华文彩云;
			}		
			/* 派生选择器 {后代选择器} */
		    div span{
				font-family: 华文彩云;
				color: blueviolet;
				border: 1px solid brown;//像素实线边框
				height:50px;
				/* 行转块 */
				display: block;
				/* 知识点5 文本格式化属性---文本对齐方式
				 line-height:行高属性
				 */
				line-height: 40px;  //文本中的上下间距
				/* 知识点6：文本格式化属性--文本间隙【字符、字符】 */
				letter-spacing:15px;
				/* 知识点7：文本格式化属性--文本间隙【字符、单词】 */
				word-spacing: 10px;
				/* 补充:1.文本所有单词大写  2.首字母放大  3.首行缩减200像素 */
				text-transform: uppercase;
				//text-transform: capitalize;  //首字母大写
				  text-indent: 200px;
			}
			a{
				font-size: 75px;
				/* 知识点8：文本修饰效果  针对超
				使用方法:与通配选择器一起使用
								none:去掉超链接的下划线
								underline:默认,下划线,切换
								line-through:删除线,被html5中s元素取代
								*/
								text-decoration:line-through;
								/* 知识点9:文本修饰效果,针对超链接和文本
								 text-shadow  文本阴影属性 
								 属性值:X值  Y值  blur模糊距离  颜色   内阴;
								 */
								text-shadow:5px 5px 25px red;
							}
								
							p{
								border: 1px solid red;/* 边框 */
								/* 知识点10：white-space换行属性
								 属性值不同效果不同
								 nowrap  效果:不换行  作用:不可以超出范围  在一行显示
								 pre    效果:保留空格和回车
								 normal  默认属性
								 */
								wh ite-space: pre;   /*不换行,就一行*/
								over flow:hidden;   /*其他行省略*/
								wh ite-space;pre;  /*保留原始文本空格和回车*/
								white-space: normal;/**/
							}
						</style>
					</head>
					<body>
						<h1>处理文本换行和溢出效果</h1>
						<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero veniam corporis ut quidem atque a maxime cum tenetur, nobis nisi minima aut ipsum voluptas reprehenderit, sunt facere rem. Assumenda, nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium vel itaque voluptate optio nobis adipisci aspernatur cupiditate, corporis dolorem ad soluta illo perspiciatis at, dicta deleniti assumenda incidunt provident harum. </p >
						<h1>
							<marquee>啊,团长你就是个七八</marquee>
							<!-- 跑马灯元素 -->
						</h1>	
						<!-- 创建div 内嵌span元素  增加假文 
						1个像素实线边框,高度25px;派生选择器给span元素添加
						-->fv
						<div id="sb"><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam incidunt quisquam ex nulla eius, unde rerum aperiam minima sint itaque adipisci repellat enim numquam qui doloribus quos reiciendis quibusdam magni!</span></div>
						<!-- 创建a的元素,跳转有 种方式-->
						<div style="height:200px"></div>
						<h1>文本修饰效果</h1>
						肺雾哈基刀< img src="img/84b392a6f442174f7c919aabc80907b1.jpg" weight="100px"height="80px" />
						
						<div id="sz" al>哈基🐅< img src="img/fa0344dfcea2b0d1cd771389090d0223.jpg"width="350px"height="250px"/></div>
						<!-- 需求:外层div  内层h1 俩别名  任意 -->
						<!-- div.h1.c1.c2   class="名 名"为俩别-->
						<div>
							    <h1 class="c1 c2">哈基虎你这家伙</h1>
								</div>
								
								
							</body>
						</html>